<!--
 * @Description: * 默认布局
 * @Date: 2020-12-26 23:24:31
 * @LastEditTime: 2021-03-28 15:35:36
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/layouts/default.vue
-->

<template>
  <div class="default_">
    <div class="default_box" v-if="list.length > 0">
      <Menu mode="horizontal" class="title_" :theme="theme1" active-name="0">
        <MenuItem name="0">
        <nuxt-link class="link_" :to="{ name: 'index' }">
          <Icon type="ios-paper" />
          首页
        </nuxt-link>
        </MenuItem>

        <template v-for="(item, index) in list">
          <MenuItem :name="index + 1" v-if="(item.child == undefined ? 1 : item.child.length) == 1" >
          <nuxt-link class="link_" :to="{ name: 'list', query: { id: item.id,name:item.name  } }">
            <Icon type="ios-construct" />
            {{ item.name }}
          </nuxt-link>
          </MenuItem>
          <Submenu :name="index + 1" :key="index" v-else>
            <template slot="title">
              <Icon type="ios-stats" />
              {{ item.name }}
            </template>
            <MenuGroup :title="item.name">
              <MenuItem :name="`${index + 1}-${index1 + 1}`" v-for="(item1, index1) in item.child" :key="index1">
              <nuxt-link class="link_" :to="{ name: 'list', query: { id: item1.id,name:item1.name } }">
                {{ item1.name }}
              </nuxt-link>
              </MenuItem>
            </MenuGroup>
          </Submenu>
        </template>

        <!-- <MenuItem name="2">
          <nuxt-link class="link_" :to="{ name: 'list' }">
            <Icon type="ios-people" />
            游戏源码
          </nuxt-link>
        </MenuItem>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-stats" />
            微信源码
          </template>
          <MenuGroup title="微信源码">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="4">
          <Icon type="ios-construct" />
          APP源码
        </MenuItem>
        <Submenu name="5">
          <template slot="title">
            <Icon type="ios-stats" />
            网站源码
          </template>
          <MenuGroup title="网站源码">
            <MenuItem name="5-1">金融/商城</MenuItem>
            <MenuItem name="5-2">行业门户</MenuItem>
            <MenuItem name="5-3">企业网站</MenuItem>
            <MenuItem name="5-4">休闲娱乐</MenuItem>
          </MenuGroup>
        </Submenu>
        <Submenu name="6">
          <template slot="title">
            <Icon type="ios-stats" />
            网站插件
          </template>
          <MenuGroup title="网站插件">
            <MenuItem name="6-1">Wordpress</MenuItem>
            <MenuItem name="6-2">Discuz!插件</MenuItem>
          </MenuGroup>
        </Submenu>
        <Submenu name="7">
          <template slot="title">
            <Icon type="ios-stats" />
            网站模板
          </template>
          <MenuGroup title="网站插件">
            <MenuItem name="7-1">Wordpress主题</MenuItem>
            <MenuItem name="7-2">Discuz!模板</MenuItem>
            <MenuItem name="7-2">其他模板</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="8">
          <Icon type="ios-people" />
          视频教程
        </MenuItem>
        <MenuItem name="9">
          <Icon type="ios-people" />
          工具包
        </MenuItem> -->

        <div class="button_" v-if="!loginS">
          <nuxt-link :to="{ name: 'vip', params: { name: 'jiyinghao' } }" style="line-height: 30px">
            <Button class="button_1" type="error" shape="circle" icon="ios-bowtie">升级 VIP 免费下载</Button>
          </nuxt-link>
          <Input suffix="ios-search" placeholder="Enter text" style="width: 200px" />
          <Button type="info" ghost @click="loaginFun">登录</Button>
          <Button type="success" ghost @click="loggingFun">注册</Button>
        </div>
        <div class="button_" v-else>
          <Dropdown>
            <a href="javascript:void(0)">
              <Avatar :src="$store.state.user.userData.avatar" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Icon type="md-contact" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '0' } }" style="line-height: 30px">
                  会员中心
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <Icon type="logo-usd" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '1' } }" style="line-height: 30px">
                  在线充值
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <Icon type="md-medal" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '2' } }" style="line-height: 30px">
                  VIP升级
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <Icon type="ios-paper" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '3' } }" style="line-height: 30px">
                  我的资料
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <Icon type="md-cloud-download" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '4' } }" style="line-height: 30px">
                  我的下载
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <Icon type="ios-filing" />
                <nuxt-link :to="{ name: 'personalCenter', query: { index: '5' } }" style="line-height: 30px">
                  我的收藏
                </nuxt-link>
              </DropdownItem>
              <DropdownItem>
                <span @click="logout">
                  <Icon type="ios-filing" />
                  退出登录
                </span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Menu>
    </div>
    <!-- <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
        <BreadcrumbItem to="/">Home</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
    </Breadcrumb> -->
    <div class="body_">
      <Nuxt />
    </div>

    <Footer class="layout-footer-center">2011-2016 &copy; TalkingData </Footer>
    <BackTop></BackTop>
    <Login ref="loaginRef" @loinSuccess="loinSuccess" />
    <Logging ref="loggingRef" @login="loaginFun" />
  </div>
</template>
<script>
import API from "@/api/index";
export default {
  data() {
    return {
      theme1: "light",
      list: [],
      iconList: [],
      productsData: [],
      loginS: false,
    };
  },
  computed: {
    // loginS: function(){
    //   return this.$store.state.login.loginData.token==""?false:true;
    // }
  },
  mounted: function () {
    console.log(this.$store.state.user.userData.name);
    this.$store.commit("user/updateUserData", { name: "kkkkooo" });

    setTimeout(() => {
      console.log(this.$store.state.user.userData.name);
    }, 2100);

    this.info();
    this.userFun();
  },

  methods: {
    logout() {
      API.logout().then((res) => {
        this.loginS = false;
        this.$Notice.success({
          title: "安全退出！",
          desc: "退出成功描述文字。 ",
        });
      });
    },
    info() {
      API.category().then((res) => {
        console.log(res);
        this.list = res.data;
        this.products(this.list);
      });
    },

    loinSuccess() {
      console.log("success");
      this.loginS = true;
    },

    products(list) {
      list.forEach((item) => {
        API.products({ id: item.id }).then((res) => {
          this.productsData = res.data;
        });
      });
    },
    userFun() {
      API.userinfo().then((res) => {
        if (res.code !== 200) {
          this.loginS = false;
          return;
        }
        this.$store.commit("user/updateUserData", res.data);
        this.loginS = true;
        console.log(this.loginS);
      });
    },
    loaginFun() {
      console.log(this.$store.state.login.loginData.token);
      // return;
      this.$refs.loaginRef.open();
    },
    loggingFun() {
      this.$refs.loggingRef.open();
    },
  },

  // async asyncData({ params }) {
  //   await API.category().then((res) => {
  //     console.log("res", res);
  //     return { list: res };
  //   });
  // },

  // asyncData() {
  //   console.log("res");
  //   return API.category().then((res) => {
  //     console.log("res", res);
  //     return { list1: res };
  //   });
  // },

  // async asyncData () {
  //   const asyncData = {};
  //   await new Promise((resolve, reject) => {
  //   API.category()
  //   .then( function(res){
  //     return {list: res};
  //     asyncData.username = res;
  //     resolve();
  //   })
  //   });
  //   return asyncData;
  // }

  // asyncData({context}) {
  //   return {foo: 'jiyinhao'}
  // return API.category()
  // .then( function(res){
  //   console.log(res)
  //   return {list: res};
  // }).catch(err => {
  //   console.log(err)
  // })
  // },
};
</script>

<style lang="scss">
.default_ {
  min-width: 1350px;
  padding-top: 60px;
  .link_ {
    height: 100%;
    width: 100%;
    display: inline-block;
    color: #515a6e;
  }
  .ivu-menu-item-active > a {
    color: #2d8cf0;
  }
  .body_ {
    width: 1350px;
    height: 100%;
    margin: 0 auto;
  }
  .default_box {
    height: 60px;
    display: flex;
    justify-content: center;
    border-bottom: solid 1px #ddd;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    .title_ {
      padding: 0 100px;
      width: 1550px;
      position: fixed;
      top: 0;
      border-bottom: none;
      > li {
        padding: 0 5px !important;
        .ivu-menu-submenu-title span > i,
        .ivu-menu-submenu-title > i {
          margin-right: 4px;
        }
      }
    }
  }

  .button_ {
    float: right;
    display: flex;
    justify-content: center;
    // width: 400px;
    padding-top: 12px;
    .ivu-dropdown {
      line-height: 15px;
    }
    .button_1 {
      margin-right: 15px;
      margin-left: 0;
    }
    button {
      margin-left: 10px;
    }
  }
  .layout-footer-center {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
}

html {
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>
